import { Carousel, Image, Rate, Table, Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
import React from 'react';

import styles from './product-intro.module.css';

interface PropsType {
  title: string;
  shortDescription: string;
  price: string | number;
  coupons: string;
  points: string;
  discount: string;
  rating: string | number;
  pictures: string[];
}
const columns: ColumnsType<RowType> = [
  {
    title: 'title',
    dataIndex: 'title',
    key: 'title',
    align: 'left',
    width: 120
  },
  {
    title: 'description',
    dataIndex: 'description',
    key: 'description',
    align: 'center'
  }
];

interface RowType {
  title: string;
  description: string | number | JSX.Element;
  key: number;
}

export const ProductIntro: React.FC<PropsType> = ({
  title,
  shortDescription,
  price,
  coupons,
  points,
  discount,
  rating,
  pictures
}) => {
  const tableDataSource: RowType[] = [
    {
      key: 2123,
      title: '限时抢购折扣',
      description: discount ? (
        <>
          ￥<Typography.Text delete>{price}</Typography.Text>{' '}
          <Typography.Text type="danger" strong>
            {discount}
          </Typography.Text>
        </>
      ) : (
        '暂无折扣'
      )
    },
    {
      key: 32133,
      title: '领取优惠',
      description: coupons ? discount : '“无优惠券可领'
    },
    {
      key: 3213124,
      title: '线路评价',
      description: (
        <>
          <Rate allowHalf defaultValue={+rating}></Rate>
          <Typography.Text style={{ marginLeft: 10 }}>{rating}星</Typography.Text>
        </>
      )
    }
  ];
  return (
    <div className={styles['intro-container']}>
      <Typography.Title level={4}>{title}</Typography.Title>
      <Typography.Text>{shortDescription}</Typography.Text>
      <div className={styles['intro-detail-content']}>
        <Typography.Text style={{ marginLeft: 20 }}>
          ￥<span className={styles['intro-detail-strong-text']}>{price}</span>元 /人起
        </Typography.Text>
        <Typography.Text style={{ marginLeft: 50 }}>
          <span className={styles['intro-detail-strong-text']}>{rating}</span>
        </Typography.Text>
      </div>
      <Carousel autoplay>
        {pictures.map((p) => {
          return <Image height={150} src={p}></Image>;
        })}
      </Carousel>
      <Table<RowType>
        dataSource={tableDataSource}
        columns={columns}
        size="small"
        bordered={false}
        pagination={false}
      />
    </div>
  );
};
